<template>
  <div class="analysisTask">
    <userechart
      ref="chart_line_one"
      :options="options"
      :height="height"
      :bordermodel="bordermodel"
      :title="title"
      :iconclass="iconclass"
      :iconcolor="iconcolor"
      :titlecolor="titlecolor"
      :decorationmodel="decorationmodel"
    />
  </div>
</template>

<script>
import userechart from '@/components/echart/index.vue'
export default {
  name: 'funnelechart',
  props: [
    'height',
    'tooltip',
    'tooltip_left',
    'series',
    'bordermodel',
    'title',
    'iconclass',
    'iconcolor',
    'titlecolor',
    'decorationmodel'
  ],
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 60,
            // x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 60, name: '访问' },
              { value: 40, name: '咨询' },
              { value: 20, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展现' }
            ]
          }
        ]
      },
      controlid: ''
    }
  },
  created() {
    this.controlid =
      'div' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
  },
  mounted() {
    this.initvalue()
    this.$refs.chart_line_one.initChart()
  },
  watch: {
    tooltip(val) {
      if (val === undefined || val === '') {
        this.options.legend.show = true
      } else {
        this.options.legend.show = val
      }
      this.$refs.chart_line_one.setOption()
    },
    tooltip_left(val) {
      if (val === undefined || val === '') {
        this.options.legend.left = 'left'
      } else {
        this.options.legend.left = val
      }
      this.$refs.chart_line_one.setOption()
    }
  },
  methods: {
    initvalue() {
      this.options.legend.show = this.tooltip
      this.options.legend.left = this.tooltip_left
    }
  },
  components: {
    userechart
  }
}
</script>
